<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        H5作业
    </title>
    <!--    <link rel="stylesheet" type="text/css" href="../css/Index.css">-->
    <!--    <script src="../js/index.js"/>-->


</head>
<script type="application/javascript">

    function onAddInfo() {
        let table = document.getElementById("tab_info")
        let rows = table.rows.length;
        if (table == null) {
            alert("数据出错！")
        } else {
            table.insertRow(rows) // 在rows行插入一行
            for (let i = 0; i < 4; i++) {
                if (i == 0) {
                    table.rows[rows].insertCell(i).innerHTML = "<input type=\"checkbox\">"
                } else {
                    table.rows[rows].insertCell(i)
                    table.rows[rows].cells[i].textContent = "未填写"
                }
                table.rows[rows].cells[i].style.background = 'rgba(60,180,57,0.71)'
            }
        }
    }

    function checkAll() {
        let inputs = document.getElementsByTagName("input")
        for (let i = 0; i < inputs.length; i++) {
            if (inputs[i].type === "checkbox") {
                inputs[i].checked = !inputs[i].checked
            }
        }

    }

</script>
<style>

    * {
        margin: 0px;
        padding: 0px;
    }

    #left_content {
        width: 200px;
        margin-right: 20px;
        float: left;
        background-color: antiquewhite;
        padding: 20px;
    }

    .right_content {
        flex: 1;
        float: left;
        padding: 20px;
        /*display: flex;*/
        background-color: #A9EAD8F1;
    }

    .content {
        display: flex;
        height: 100vh;
        margin: 20px;
    }


    button {
        width: 60px;
        height: 30px;
        border-radius: 3px;
        border: 0px;
    }

    .addButton {
        background-color: rgba(24, 175, 67, 0.82);
        color: white;
    }

    .otherButton {
        color: black;
    }

    input {
        padding: 5px 10px;
    }

    table {
        margin-top: 10px;
        flex: 1;
        width: 100%;
        border: 1px solid;
        border-collapse: collapse;
        background-color: white;
    }

    tr {
        border: 1px solid rgba(203, 198, 193, 0.82);
        padding: 10px;
    }

    td {
        /*border: 1px solid;*/
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
    }

</style>
<body>

<div class="content">

    <div id="left_content">
        left的内容
    </div>

    <div class="right_content">

        <div>

            <button class="addButton" type="button" onclick="onAddInfo()">+新增</button>
            <button class="otherButton" type="button">编辑</button>
            <button class="otherButton" type="button">审核</button>

        </div>

        <table id="tab_info">
            <tr id="row_info">
                <td>
                    <input type="checkbox" onclick="checkAll()">
                </td>
                <td>字段1</td>
                <td>字段2</td>
                <td>字段3</td>
            </tr>

            <tr>
                <td><input type="checkbox"></td>
                <td></td>
                <td></td>
                <td>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td></td>
                <td></td>
                <td>
                </td>
            </tr>

        </table>

    </div>

</div>
</body>
</html>